<!--
 * @Author: 橘子
 * @Date: 2023-03-13 14:46
 * @Project_description: 项目介绍
 * @Description: 代码是我抄的，不会也是真的
-->
<template>
  <d2-container class='org'>
    <avue-tree v-model='form' :data='data' :option='option'
               @node-click='nodeClick'>
    </avue-tree>
  </d2-container>
</template>

<script>
import { mapActions } from 'vuex'
// import引入的组件需要注入到对象中才能使用
export default {
  name: 'sys-org',
  data() {
    // 这里存放数据
    return {
      form: {},
      data: [],
      option: {
        defaultExpandAll: true, //是否展开节点
        filter: true,  //是否显示搜索框
        dialogWidth: '30%',
        menu: false,
        addBtn: false,
        //tree配置
        props: {
          label: 'orgName',
          value: 'orgId',
        },
      },
    }
  },
  created() {
    this.getList()
  },
  // 方法集合
  methods: {
    ...mapActions('tree/org', ['set', 'setOrgTree']),
    nodeClick(data) {
      //vuex的orgId
      this.set(data.orgId)
    },
    //查询树
    async getList() {
      let req = {
        depth: 2,
        state: 0,
        orgId: this.$db._getUser('currentOrgId'),
      }
      //树和list都是空
      let res = await this.$api.org.tree(req)
      this.data = res.data
      this.setOrgTree(res.data)
    },
  },
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.org {
  padding: 0 !important;
}

::v-deep .el-tree {
  background: none !important;

}

::v-deep .el-tree-node__content {
  height: 45px;
}

::v-deep .el-tree-node.is-current > .el-tree-node__content {
  //background-color: rgba(0, 0, 0, 0) !important;

}

::v-deep .d2-container-full {
  border: none !important;
  right: 0 !important;
}

::v-deep .d2-container-full__body {
  background: none !important;
}
</style>
